<template>
  <!-- 专业平台 放心平台 -->
  <div class="trans-bar content down_bg">
    <div class="down_temp">
      <div class="down_infotitle">
        <div class="terrace_tips">
          <p>{{$t("label304")||"随时随地 多平台终端交易"}}</p>
          <!-- <h1 class="font-24 color_main">{{$t("label303")||"移动端平台交易"}}</h1> -->
					<p class="do_title">覆盖IOS、Android等平台，支持全业务功能</p>
        </div>
        
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
					<div class="grid-content">
            <div class="downbox">
              <div class="btn">
                <div class="appicon">
									<div class="flex btn_cor">
										<i class="iconfont icon-ai-ios"></i>
										<p>iPhone版本</p>
									</div>
									<div class="flex btn_cor m-top-15"> 
										<i class="iconfont icon-anzhuo"></i>
										<p>Android版本</p>
									</div>
								</div>
                
              </div>
              <div class="img_none qrbox">
                 	<div class="qr-code">
										<vue-qr
											v-if="downAppurl"
											:text="downAppurl"
											:margin="10"
											:size="150"
										>
										</vue-qr>
									</div>
									<p class="d_bottip">IOS & Android 扫码下载</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="grid-content leftimg">
            <img src="../../assets/images/home/87c7a04.png" alt />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import newsModel from "@/model/newsModel.js";
import VueQr from "vue-qr";

let { newsList } = newsModel;
export default {
	name: "app-down",
	components: { VueQr },
  data() {
    return {
      downAppurl:'',
      TrandNumItem: null,
			classifyList: [],
    };
  },
  created(){
    this.downAppurl= `${this.api.downAppurl}`;
  },
  mounted() {
		if (this.qrcode) return false;
    this.$bus.on("qrCodeLoad", url => {
      url && (this.qrcode = url);
    });
    //获取公告列表
    if (newsList) {
      this.noticeItem = newsList;
      return;
    }
    // this.getNewsList();
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.down_temp {
  padding: 40px 0;
}
.terrace_tips {
  text-align: center;
  padding-top: 0px;
  margin-bottom: 80px;
  p {
    color: #ffffff;
    height: 50px;
		line-height: 50px;
		font-size: 36px;
    padding: 0 15px;
	}
	.do_title {
    color: #B7C5DB;
		padding: 15px 0;
		font-size: 18px;
  }
}
.downbox {
	cursor: pointer;
  .flex {
    display: flex;
    align-items: center;
  }
  .btn {
    color: #ffffff;
  }
  .m-top-40 {
    margin-top: 40px;
  }
  .m-left-50 {
    margin-left: 30px;
  }
  .downbtn {
    img {
      width: 200px;
    }
  }
}
.leftimg {
  img {
		position: absolute;
		width: 600px;
		top: -12px;
		bottom: 4px;
		z-index: 1;
    margin-left: 100px;
  }
}
.qrimgbox {
  cursor: pointer;
}
.img_none {
	width: 220px;
	margin-top: 20px;margin-left:0px;
	.qr-code{
		width:180px;
		height:180px;
		margin: 0 auto;
		background:rgba(58,118,204,0.14);
		border:1px solid rgba(58,118,204,1);
		border-radius:4px;
		padding: 15px;
		img {
			width: 180px;
			margin: 20px!important;
		}

	}
  .d_bottip{width:220px;color: #d5def2;line-height: 50px;font-size: 14px;text-align: center;}
  
}
// appicon
.btn_cor{
	width:220px;
	height:64px;
	border-radius:4px;
	justify-content:center;
	align-items:center;
	i{font-size: 24px;}
	p{font-size: 18px;text-align: center;padding-left: 5px;}
}
.btn_cor:hover{
	background:linear-gradient(90deg,rgba(58,118,204,1),rgba(75,145,246,1));
	color: #3A76CC;
	border:1px solid #3A76CC;
	transition: all 2s linear;
}
</style>